<template>
  <section class="container">
    <h2>这是首页</h2>
    <p>
      <nuxt-link to="/message">留言页面</nuxt-link>
    </p>
    <p>
      <nuxt-link to="/detail/1243">详情页面</nuxt-link>
    </p>
    <!--<ol>-->
      <!--<li v-for="(item, i) in testData" :key="i">{{ item }}</li>-->
    <!--</ol>-->
    <div class="test">
      <p ref="p">1234</p>
    </div>
  </section>
</template>

<script>
  export default {
    transition: 'bounce',
    data() {
      return {
        testData: [
          'aasdf',
          'asdf',
          'asdf'
        ]
      }
    },
    methods: {
      test() {
        console.log(this.$refs.p)
        const {p} = this.$refs
        p.addEventListener('mouseover', () => {
          p.classList.add('test')
        })
        p.addEventListener('mouseleave', () => {
          p.classList.remove('test')
        })
      }
    },
    mounted() {
      this.test()
    }
  }
</script>

<style lang="scss">
  .container {
    line-height: 2;
    display: flex;
    flex-direction: column;
    h2 {
      color: red;
    }
  }
</style>
